<template>
    <div class="preview-item model-picture-preview" ref="preview"  :style="boxStyle">
        <img :src="config.image" />
    </div>
</template>

<script>
import previewMixin from '../../previewMixin.js';
import image1 from './example/1.png';
import defaultConfig from './defaultConfig.js';
export default{
    mixins:[previewMixin],
    data(){

        let config = JSON.parse(JSON.stringify(defaultConfig));
        config.image = image1;
        
        return {
            config,
        }
    },
    computed:{
        boxStyle(){
            let style = {};
            style.height = this.config.height;

            if (this.config.radius){
                style.borderRadius = this.config.radius;
            }


            if (this.config.imageMode){
                switch(this.config.imageMode){
                    case 'aspectFill':
                        style['--image-fit'] = 'cover';
                        break;
                    case 'aspectFit':
                        style['--image-fit'] = 'contain';
                        break;
                    case 'scaleToFill':
                        style['--image-fit'] = 'fill';
                        break;
                    case 'center':
                       style['--image-fit'] = 'none';
                    break;
                }
            }
            return style;
        },
    },
    methods:{
        setParam(param){
            
            if ( param && param.image){
                param.image = this.$uploadUrl(param.image);  
            }
            this.$assign(this.config,param);
        }
    },
    
}
</script>

<style>
.model-picture-preview{
    width: 100%;
    position: relative;
    overflow: hidden;
    height: 300px;
    --image-fit:cover; 
}

.model-picture-preview img{
    width: 100%;
    height: 100%;
    object-fit:var(--image-fit);
}

</style>